<template>
	<view class="product" v-for="(item, index) in data.productInfo" :key="item.product_id">
		<view class="product_header">
			<view class="product_header_img">
				<image :src="item.image_url" mode=""></image>
			</view>
		</view>
		<view class="product_content">
			<view class="product_content_h">
				<view class="product_content_h_l">
					{{ item.product_name }}
					<view class="product_content_h_l_kg">{{ item.product_name }}-单位为KG</view>
				</view>
				<view class="product_cotent_h_r">
					<up-icon name="star" size="30"></up-icon>
					收藏
				</view>
			</view>
			<view class="product_content_m">
				<up-collapse>
					<up-collapse-item name="2" title="描述">
						<text class="u-collapse-content">{{ item.description }}</text>
					</up-collapse-item>
				</up-collapse>
			</view>			
			<view class="product_content_b">￥{{ item.price }}</view>
		</view>
		<view class="product_bottom">
			<view class="product_bottom_h">
				<view class="product_bottom_h_l">
					单位
					<view class="product_bottom_h_l_unit">{{ item.weight }}</view>
					库存<view class="product_bottom_h_l_num">{{ item.inventory }}</view>
				</view>
				<view class="product_bottom_h_r">				
					<view>
						<!-- <up-icon name="more-circle" size="28"></up-icon> -->
						<up-number-box v-model="data.number" :min="1" :max="data.productInfo[0].inventory" @change="valChange"></up-number-box>
					</view>
				</view>
			</view>
			<view class="product_bottom_b">
				<buyButtonVue :data="data"></buyButtonVue>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, watch, watchEffect, reactive } from 'vue';
import buyButtonVue from '../../components/buyButton/buyButton.vue';
import { GetProductDataFromId } from '../../apis/api.js';

const value = ref(0);
const globalParams = ref({});
const data = reactive({
	productInfo: '',
	number: 1
});

// 增加数量
const valChange = (e) => {
	console.log(e);
	data.number = e.value;
	console.log(data.number);
};

// 获取商品信息

const getCurrentParams = () => {
	let options = getCurrentPages().pop().options;
	globalParams.value = options || {};
};

watchEffect(() => {
	getCurrentParams();
	console.log('Global params updated:', globalParams.value.product_id);
	GetProductDataFromId({
		product_id: globalParams.value.product_id
	})
		.then((res) => {
			data.productInfo = res.data;
			console.log(res.data);
		})
		.catch((err) => {
			console.error('失败', err);
		});
});
</script>

<style lang="less" scoped>
.product {
	height: 100vh;
	background-color: #f5f9fa;
	.product_header {
		height: 500rpx;
		.product_header_img {
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.product_content {
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 5rpx;
		margin-top: 20px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
		border-radius: 10px;
		border-top: 1rpx solid #ccc;
		.product_content_h {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			.product_content_h_l {
				font-size: 40rpx;
				.product_content_h_l_kg {
					font-size: 30rpx;
					padding-top: 10rpx;
					color: #949494;
				}
			}
			.product_cotent_h_r {
				font-size: 28rpx;
				padding-bottom: 5rpx;
				.product_bottom_h_r_content {
				}
			}
		}
		.product_content_m {
			font-size: 15rpx;
			color: #949494;
			overflow: auto;
		}
		.product_content_b {
			font-size: 40rpx;
			color: #f96c2f;
			padding-top: 20rpx;
		}
	}
	.product_bottom {
		margin-top: 15rpx;
		.product_bottom_h {
			height: 80rpx;
			border: 1px solid transparent;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
			border-radius: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.product_bottom_h_l {
				display: flex;
				padding-right: 5rpx;
				.product_bottom_h_l_num{
				}
				.product_bottom_h_l_unit{
					padding-right: 20rpx;
				}
			}
		}
	}
}
</style>
